
<!DOCTYPE html>
<html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/JSXTransformer.js"></script>   
    <script src="build/jquery.min.js"></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    <style>
       .commentBox{

          width:600px;
          margin:0 auto;

          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;

       }
       .loadingShow{
        display:inline-block;
       }
       .loadingHide{
        display:none;
       }
       
    </style>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      
      var CommentBox = React.createClass({
        getInitialState:function(){
          return {
            active:0,
            data:[]
          };
        },
        onloadData:function(){
          $.ajax({
            url:"data/select_con.php",
            dataType:"json",
            cache:false,
            success:function(data){
              this.setState({
                active:1,
                data:data
              });
              console.log(this.state.data);
            }.bind(this),

            error: function(xhr, status, err) {
              /*console.error(this.props.url, status, err.toString());*/
            }.bind(this)

          });

        },
        handleCommentSubmit:function(sendData){
          var comments = this.state.data;
          var newComments = comments.concat([sendData]);
          this.setState({data: newComments});
         
          $.ajax({
            url:"data/show_con.php",
            dataType:"text",
            data:sendData,
            success:function(data){

              this.setState({
                /*data:data*/
       
              });

            }.bind(this),
            error: function(xhr, status, err) {
              /*console.error(this.props.url, status, err.toString());*/
            }.bind(this)

          });
          
        },
        componentDidMount:function(){
          var onloadData = setTimeout(this.onloadData, 2000);

        },
        render:function(){
          return(
            <div className="commentBox">
              <h1>评论列表</h1>
              <CommentList data={this.state.data} active={this.state.active} />
              <CommentForm onCommentSubmit={this.handleCommentSubmit} />
            </div>
            );
        }
      });
      var CommentList = React.createClass({
        render: function() {
          var dongtaiCons = this.props.data.map(function(dataContext){
            return (<Comment author={dataContext.author}>{dataContext.text}</Comment>);
          });
          return (
            <div className="commentList">
               <img className={this.props.active==0?"loadingShow":"loadingHide"} src="images/ajax_start.gif" />
              {dongtaiCons}
            </div>
          );
        }
      });
      var CommentForm = React.createClass({
        handleSubmit:function(e){
           e.preventDefault();
           var author = this.refs.author.value;
           var text = this.refs.text.value;
           if (!text || !author) {
            return;
          }
          this.props.onCommentSubmit({author: author, text: text});
          this.refs.author.value = '';
          this.refs.text.value = '';
          return;
        },
        render: function() {
          return (
            
              <form className="formStyle" onSubmit={this.handleSubmit}>
                <input type="text" className="inputStyle" ref="author" placeholder="您的名字"/>
                <input type="text" className="inputStyle" ref="text" placeholder="自古评论出英雄" />
                <input type="submit" value="Post" />
              </form>
     
          );
        }
      });
      var Comment = React.createClass({
        render: function() {
          return (
            <div className="comment">
              <h2 className="commentAuthor">
                {this.props.author}
              </h2>
              {this.props.children}
            </div>
          );
        }
      });
      ReactDOM.render(
        <CommentBox url="data/data.json" />,
        document.getElementById("example")
        );
      
    </script>
  </body>
</html>
